<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function jisuan(valu){
				var num = document.getElementById("d");
				try{
					switch (valu){
						case "←":
						
						
							num.value = num.value.substring("",num.value.length-1);
							break;
						case "=":
							num.value = num.value.replace(/×/g,"*");
							num.value = num.value.replace(/÷/g,"/");
							num.value=eval(num.value);
							if(num.value=="Infinity"){
								num.value="逗我呢？？？？？";
							}
							if(num.value=="undefined"){
								num.value="";
							}
							break;
						case "C":
							num.value="";
							break;
						default:
							num.value=num.value+valu;
							break;
					}
				}catch(e){
					//TODO handle the exception
					alert("滚蛋！！！！！");
					
				}
				
			}
		</script>
		<style type="text/css">
			input[type="text"]{
				position: relative;
				top: -10px;
				height: 40px;
				width: 250px;
				border-radius: 5px;
				margin-top: 20px;
				font-size: 20px;
				
			}
			
			input[type="button"]{
				margin:0px 10px;
				border-radius: 5px;
				background-color: white;
				width: 45px;
				height: 45px;
				font-size: 20px;
				transition: all 0.5s ease-in-out;
			}
			input[type="button"]:hover{
				background-color: greenyellow;
				transition: all 0.5s ease;
			}
			input[type="button"]:active{
				background-color: cadetblue;
			}
			input[id="="]{
				height: 90px;
				font-size: 25px;
			}
			input[id="y"]{
				font-size: 25px;
			}
			
			table{
				background-color: #00FFFF;
				border-radius: 10px;
			}
			table td{
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<table align="center">
			<tr>
				<td colspan="4">
					<input type="text" id="d" />
				</td>
			</tr>
			<tr>
				<td>
				<input type="button" name="" id="" value="C" onclick="jisuan(this.value)" />
				</td>
				<td>
				<input type="button" name="" id="y" value="÷" onclick="jisuan(this.value)"  />
					
				</td>
				<td>
				<input type="button" name="" id="y" value="×" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="y" value="←" onclick="jisuan(this.value)" />
					
				</td>
			</tr>
			<tr>
				<td>
				<input type="button" name="" id="" value="7" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="8" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="9" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="y" value="-" onclick="jisuan(this.value)" />
					
				</td>
			</tr>
			<tr>
				<td>
				<input type="button" name="" id="" value="4" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="5" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="6" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="y" value="+" onclick="jisuan(this.value)" />
					
				</td>
			</tr>
			<tr>
				<td>
				<input type="button" name="" id="" value="1" onclick="jisuan(this.value)"/>
					
				</td>
				<td>
				<input type="button" name="" id="" value="2" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="3" onclick="jisuan(this.value)" />
					
				</td>
				<td rowspan="2">
				<input type="button" name="" id="=" value="=" onclick="jisuan(this.value)" />
					
				</td>
			</tr>
			<tr>
				<td>
				<input type="button" name="" id="" value="%" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="0" onclick="jisuan(this.value)" />
					
				</td>
				<td>
				<input type="button" name="" id="" value="." onclick="jisuan(this.value)" />
					
				</td>
				
			</tr>
		</table>
	</body>
</html>
